<template>
  <view class="skeleton-container">
    <!-- 用户信息骨架屏 -->
    <view class="profile-card">
      <view class="user-info-section">
        <!-- 头像骨架屏 -->
        <view class="avatar">
          <up-skeleton width="80px" height="80px" shape="circle"></up-skeleton>
        </view>

        <!-- 编辑按钮骨架屏 -->
        <view class="edit-btn">
          <up-skeleton width="80px" height="32px"></up-skeleton>
        </view>

        <!-- 用户详细信息骨架屏 -->
        <view class="user-details">
          <up-skeleton width="120px" height="24px" style="margin-bottom: 8px"></up-skeleton>
          <up-skeleton width="150px" height="16px" style="margin-bottom: 12px"></up-skeleton>

          <view class="user-info-list">
            <view class="info-item">
              <up-skeleton width="80px" height="14px"></up-skeleton>
            </view>
            <view class="info-item">
              <up-skeleton width="60px" height="14px"></up-skeleton>
            </view>
            <view class="info-item">
              <up-skeleton width="100px" height="14px"></up-skeleton>
            </view>
          </view>

          <up-skeleton width="200px" height="14px" style="margin: 12px 0"></up-skeleton>

          <view class="tag-container">
            <up-skeleton width="60px" height="24px" style="margin-right: 8px"></up-skeleton>
            <up-skeleton width="50px" height="24px" style="margin-right: 8px"></up-skeleton>
            <up-skeleton width="80px" height="24px"></up-skeleton>
          </view>
        </view>
      </view>
    </view>

    <!-- 统计数据骨架屏 -->
    <view class="stats-card">
      <view class="stats-grid">
        <view class="stats-item">
          <up-skeleton width="40px" height="20px" style="margin-bottom: 4px"></up-skeleton>
          <up-skeleton width="30px" height="14px"></up-skeleton>
        </view>
        <view class="stats-item">
          <up-skeleton width="40px" height="20px" style="margin-bottom: 4px"></up-skeleton>
          <up-skeleton width="30px" height="14px"></up-skeleton>
        </view>
        <view class="stats-item">
          <up-skeleton width="40px" height="20px" style="margin-bottom: 4px"></up-skeleton>
          <up-skeleton width="30px" height="14px"></up-skeleton>
        </view>
      </view>
    </view>

    <!-- Tab切换骨架屏 -->
    <view class="tabs-card">
      <up-skeleton width="100%" height="40px"></up-skeleton>
    </view>

    <!-- 内容区域骨架屏 -->
    <view class="content-card">
      <view class="post-list">
        <view v-for="i in 3" :key="i" class="post-card">
          <view class="post-header">
            <up-skeleton width="40px" height="40px" shape="circle"></up-skeleton>
            <view class="user-info">
              <up-skeleton width="80px" height="16px" style="margin-bottom: 4px"></up-skeleton>
              <up-skeleton width="60px" height="12px"></up-skeleton>
            </view>
          </view>
          <view class="post-content">
            <up-skeleton width="100%" height="14px" style="margin-bottom: 8px"></up-skeleton>
            <up-skeleton width="80%" height="14px" style="margin-bottom: 8px"></up-skeleton>
            <up-skeleton width="60%" height="14px"></up-skeleton>
          </view>
          <view class="post-actions">
            <up-skeleton width="60px" height="32px" style="margin-right: 20px"></up-skeleton>
            <up-skeleton width="60px" height="32px" style="margin-right: 20px"></up-skeleton>
            <up-skeleton width="60px" height="32px"></up-skeleton>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  // 用户资料骨架屏组件
</script>

<style lang="scss" scoped>
  .skeleton-container {
    .profile-card {
      background: white;
      border-radius: 12px;
      margin: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .user-info-section {
        position: relative;
        padding-top: 60px;

        .avatar {
          position: absolute;
          top: -40px;
          left: 20px;
          z-index: 10;
        }

        .edit-btn {
          position: absolute;
          top: 20px;
          right: 20px;
        }

        .user-details {
          .user-info-list {
            margin-bottom: 12px;

            .info-item {
              margin: 4px 0;
            }
          }

          .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
          }
        }
      }
    }

    .stats-card {
      background: white;
      padding: 20px;
      margin: 12px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .stats-grid {
        display: flex;
        justify-content: space-around;

        .stats-item {
          text-align: center;
        }
      }
    }

    .tabs-card {
      margin: 12px;
      background: white;
      padding: 10px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .content-card {
      background: white;
      padding: 20px;
      margin: 12px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      .post-card {
        background: white;
        border-radius: 12px;
        margin: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .post-header {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .user-info {
            margin-left: 12px;
            flex: 1;
          }
        }

        .post-content {
          margin-bottom: 12px;
        }

        .post-actions {
          display: flex;
          justify-content: space-around;
          border-top: 1px solid #f0f0f0;
          padding-top: 12px;
        }
      }
    }
  }
</style>
